<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="100px">
        <el-form-item label="标签名称" prop="tagName">
          <el-input
            v-model="queryParams.tagName"
            placeholder="请输入标签名称"
            clearable
            width="300"
            style="width:240px"
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="对海政通状态" prop="isHztVisible">
          <el-select v-model="queryParams.isHztVisible">
            <el-option label="全部" :value="null"/>
            <el-option label="启用" :value="1"/>
            <el-option label="禁用" :value="0"/>
          </el-select>
        </el-form-item>
        <el-form-item label="对公众状态" prop="isPublicVisible">
          <el-select v-model="queryParams.isPublicVisible">
            <el-option label="全部" :value="null"/>
            <el-option label="启用" :value="1"/>
            <el-option label="禁用" :value="0"/>
          </el-select>
        </el-form-item>
        <el-form-item label="标签状态" prop="isHztVisible">
          <el-select v-model="queryParams.isHztVisible">
            <el-option label="全部" :value="null"/>
            <el-option label="完整" :value="1"/>
            <el-option label="缺失" :value="0"/>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>

          <!--          <el-button-->
          <!--            type="warning"-->
          <!--            plain-->
          <!--            icon="el-icon-download"-->
          <!--            size="mini"-->
          <!--            @click="handleExport"-->
          <!--            v-hasPermi="['monitor:tag:export']"-->
          <!--          >导出-->
          <!--          </el-button>-->
        </el-form-item>
      </el-form>

      <el-row :gutter="10" class="mb8">
        <right-toolbar :showSearch.sync="showSearch" @queryTable="getTableData"></right-toolbar>
      </el-row>

      <el-table v-loading="loading" :data="tableData">
        <el-table-column label="标签编号" width="80" align="center" prop="tagId"/>
        <el-table-column label="标签名称" align="left" width="200" prop="tagName" :show-overflow-tooltip="true"/>
        <el-table-column label="应用政策" align="center"></el-table-column>
        <el-table-column label="对海政通状态" align="center">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.isHztVisible"
              :active-value="1"
              :inactive-value="0"
              @change="handleStatusChange(scope.row, 'isHztVisible')"
            ></el-switch>
          </template>
        </el-table-column>
        <el-table-column label="对公众状态" align="center">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.isPublicVisible"
              :active-value="1"
              :inactive-value="0"
              @change="handleStatusChange(scope.row, 'isPublicVisible')"
            ></el-switch>
          </template>
        </el-table-column>
        <el-table-column>
          <template slot-scope="scope">
            <el-button type="text" size="mini" @click="handleEdit(scope.row)">编辑</el-button>
            <el-button type="text" size="mini" @click="handleDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>



      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getTableData"
      />
    </el-row>


    <el-dialog title="标签" :visible.sync="editOpen" width="600px" append-to-body>
      <el-form ref="form" :model="formData" label-width="120px">
        <el-row>
          <el-col :span="20">
            <el-form-item label="标签名称">{{ formData.tagName }}</el-form-item>

            <el-form-item label="政策说明">
              <el-input type="textarea" v-model="formData.tagDescription">

              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitEdit">确 定</el-button>
        <el-button @click="cancelEdit">取 消</el-button>
      </div>
    </el-dialog>


  </div>
</template>

<script>
import {getList, update, getDetail} from '@/api/tags/tags'

export default {
  name: "tagsList",
  data() {
    return {
      tableData: [],
      loading: false,
      total: 0,
      editOpen: false,
      showSearch: true,
      queryParams: {
        tagName: undefined,
        isHztVisible: undefined,
        isPublicVisible: undefined,
        is_activated: undefined,
        pageNum: 1,
        pageSize: 10,
      },
      formData: {
        tagId: undefined,
        tagName: undefined,
        tagDescription: undefined,
      },

    }
  },
  created() {
    this.getTableData()
  },
  methods: {
    getTableData() {
      this.loading = true;
      getList(this.queryParams).then(res => {
        this.tableData = res.rows;
        this.total = res.total;
        this.loading = false
      })
    },
    resetQuery() {
      this.resetForm("queryForm");
      this.getTableData()
    },
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getTableData();
    },
    handleStatusChange(row, field) {
      let text = row[field] === 1 ? "启用" : "停用";
      let filedName = field === 'isHztVisible' ? '对海政通' : '对公众'
      this.$modal.confirm(`确认「${row.tagName}」${filedName}${text}? `).then(
        () => update({
          tagId: row.tagId,
          [field]: row[field]
        }).then(() => this.$modal.msgSuccess("修改成功"))
      ).catch(() => {
        row[field] = row[field] === 1 ? 0 : 1
      })
    },
    handleEdit(row) {
      getDetail(row.tagId).then(res => {
        this.formData = res.data
        this.editOpen = true
      })
    },
    handleDelete(row) {

    },
    resetForm() {
      this.formData = {
        tagId: undefined,
        tagName: undefined,
        tagDescription: undefined,
      }
    },
    submitEdit() {
      let postData = {
        tagId: this.formData.tagId,
        tagDescription: this.formData.tagDescription
      }
      update(postData).then(() => {
        this.$modal.msgSuccess("修改成功")
        this.editOpen = false
        this.getTableData()
      })
    },
    cancelEdit() {
      this.resetForm()
      this.editOpen = false
    }
  }
}
</script>


<style scoped lang="scss">

</style>
